<!doctype html>
<html lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>预制菜溯源系统</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <style>
        body {
            font-family: 宋体;
        }
    </style>
</head>
  <body>
<div id="loading"><div id="loading-center"></div></div>
      <div class="wrapper">
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="{{url_for('index')}}">
               <img src="../static/images/logo.png" class="img-fluid" alt="">
               <span>预制菜溯源系统</span>
               </a>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">

                     <li>
                        <a href="{{url_for('index')}}" class="iq-waves-effect"><i class="ri-home-4-fill"></i><span>首页</span></a>
                     </li>
                     <li>
                        <a href="{{url_for('trace_select')}}" class="iq-waves-effect"><i class="ri-search-2-line"></i><span>溯源查询</span></a>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-shield-user-fill"></i><span>个人中心 </span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('change_form')}}">资料编辑</a></li>
                              <li><a href="{{url_for('change_passwd')}}">修改密码</a></li>
                        </ul>
                     </li>

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-settings-fill"></i>用户管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('my_user')}}">我的用户</a></li>
                              <li><a href="{{url_for('add_user')}}">添加用户</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'transporter') %}
                     <li class="menu-open active">
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-todo-fill"></i>运输管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li class="active"><a href="{{url_for('transport_test')}}">运输信息管理</a></li>
                              <li><a href="{{url_for('transport_show')}}">运输路线管理</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="{{url_for('product_manage')}}" class="iq-waves-effect"><i class="ri-file-edit-fill"></i><span>合约管理</span></a>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'producer') %}
                     <li>
                        <a href="javascript:void(0);"><i class="ri-stack-fill"></i>产品信息录入</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('raw_material')}}">原材料录入</a></li>
                              <li><a href="{{url_for('production_record')}}">生产记录创建</a></li>
                              <li><a href="{{url_for('product_generation')}}">产品生成</a></li>
                        </ul>
                     </li>
                     {% endif %}
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
         <div class="iq-top-navbar">
            <div class="iq-navbar-custom">

               <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="iq-search-bar">
                     <form action="#" class="searchbox">
                        <input type="text" class="text search-input" placeholder="请输入搜索内容...">
                        <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                     </form>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="ri-menu-3-line"></i>
                  </button>
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto navbar-list">

                        <li>
                           <a href="{{url_for('AI')}}">AI对话</a>
                        </li>

                        <li class="nav-item">
                           <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">所有通知<small class="badge  badge-light float-right pt-1">4</small></h5>
                                    </div>

                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/01.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">艾玛·沃森·比尼。</h6>
                                             <small class="float-right font-size-12">刚刚</small>
                                             <p class="mb-0">消息</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/02.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">新客户加入</h6>
                                             <small class="float-right font-size-12">5天前</small>
                                             <p class="mb-0">系统管理员</p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <ul class="navbar-list">
                     <li>
                        <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                           <img src="..//static/images/user1.jpg" class="img-fluid rounded mr-3" alt="user">
                           <div class="caption">
                              {% if user %}
                                  <h6 class="mb-0 line-height">{{ user.username }}</h6>
                                  <span class="font-size-12">{{ user.role }}</span>
                              {% else %}
                                  <h6 class="mb-0 line-height">未登录</h6>
                                  <span class="font-size-12">游客</span>
                              {% endif %}
                           </div>
                        </a>
                        <div class="iq-sub-dropdown iq-user-dropdown">
                           <div class="iq-card shadow-none m-0">
                              <div class="iq-card-body p-0 ">
                                 <div class="bg-primary p-3">
                                    <h5 class="mb-0 text-white line-height">你好-{{ user.username }}</h5>
                                 </div>
                                 <a href="{{url_for('change_form')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-file-user-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">个人中心</h6>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="{{url_for('change_passwd')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-profile-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">修改密码</h6>
                                       </div>
                                    </div>
                                 </a>


                                 <div class="d-inline-block w-100 text-center p-3">
                                    <a class="bg-primary iq-sign-btn" href="{{ url_for('logout') }}" role="button">退出登录<i class="ri-login-box-line ml-2"></i></a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </nav>

            </div>
         </div>
         <!-- TOP Nav Bar END -->
         <div class="container-fluid">
            <div class="iq-card">
               <div class="iq-card-header d-flex justify-content-between">
                  <div class="iq-header-title">
                     <h4 class="card-title">运输管理</h4>
                  </div>
               </div>
               <div class="iq-card-body">
						<!-- <div class="topbtn"> <a href="javascript:;" class="btn btn-info">报告管理</a> </div>-->
						  <div class="selbox">
							<div class="form1">
							  <ul class="row">
								<li class="col-xs-4"> <span>手机号码：</span>
								  <input type="text" class="form-control">
								</li>
								<li class="col-xs-4"> <span>姓名：</span>
								 <input type="text" class="form-control">
								</li>
								  
								
								<li class="col-xs-4" style="padding-left: 10px"> <a href="javascript:;" class="btn btn-primary">查询</a> <a href="javascript:;" class="btn btn-default">重置</a> 
								  <a class="btn" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">更多查询条件</a>
								  </li>
							  </ul>
							</div>
							  
								<div class="collapse in" id="collapseExample" aria-expanded="true" style="">
									<div class="form1">
										<ul class="row">
							  <li class="col-xs-4"> <span>确认状态：</span>
								  <select class="form-control">
                                      <option>是否运输完成</option>
                                      <option>是</option>
                                      <option>否</option>
                                  </select>
								</li>
								  
								  <li class="col-xs-4"> <span>运输状态：</span>
								 <select class="form-control">
                                     <option>请选择</option>
                                     <option>运输完成</option>
                                     <option>运输中</option>
                                     <option>未运输</option>
                                 </select>
								</li>
						
								<li class="col-xs-4">
								<span>运输完成时间：</span>
								<input type="text" class="form-control " id="date" style="min-width:230px;" placeholder="请选择起止时间" lay-key="1">
							</li>
							
							</ul>
						</div>
									
						  </div>
						  <div class="tablebox">
							  <table class="table" id="showInfo">
							<thead>					
							  <tr>			
								<th><input type="checkbox" class="allsel"></th>
                                <th>产品名称</th>
                                <th>运输车辆信息</th>
                                <th>运输起点</th>
                                <th>运输终点</th>
                                <th>运输开始时间</th>
                                <th>运输结束时间</th>
                                <th>温度控制信息</th>
                                <th>运输负责人</th>
                                <th>运输里程</th>
							  </tr>
							</thead>

                            <tbody>

{#                                <tr>#}
{#                                  <td><input type="checkbox"></td>#}
{#                                    <a href="javascript:;" class="badge badge-success">产品名称</a>#}
{#                                  <td>#}
{#                                      <td>运输起点</td>#}
{#                                  </td>#}
{#                                  <td>运输终点</td>#}
{#                                  <td>运输开始时间</td>#}
{#                                  <td>运输结束时间</td>#}
{#                                  <td>温度控制信息</td>#}
{#                                  <td><span class="badge badge-success">已完成</span></td>#}
{#                                  <td><a href="javascript:;">运输负责人</a></td>#}
{#                                  <td>运输里程</td>#}
{#                                </tr>#}
							  </tbody>
							
						  </table>
							  </div>
						 <div class=""> <a href="javascript:;" class="btn btn-success" id="addInfo" data-toggle="modal" data-target="#addTransportModal">添加</a></div>

						</div>
					  </div>
            </div>
           
        
         </div>

         <!-- Bootstrap 模态框 -->
    <div class="modal fade" id="addTransportModal" tabindex="-1" role="dialog" aria-labelledby="addTransportModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addTransportModalLabel">添加运输信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addTransportForm">
                        <div class="form-group">
                            <label for="product_name">产品名称</label>
                            <select class="form-control" id="product_name">
                                <!-- 产品名称选项将通过 AJAX 动态加载 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="transporter">运输负责人</label>
                            <select class="form-control" id="transporter">
                                <!-- 运输负责人选项将通过 AJAX 动态加载 -->
                            </select>
                        </div>

                       <div class="form-group">
            <label for="start_province">运输起点省份</label>
            <input type="text" class="form-control" id="start_province" placeholder="输入起点省份">
        </div>
        <div class="form-group">
            <label for="start_city">运输起点城市</label>
            <input type="text" class="form-control" id="start_city" placeholder="输入起点城市">
        </div>
        <div class="form-group">
            <label for="start_street">运输起点街道</label>
            <input type="text" class="form-control" id="start_street" placeholder="输入起点街道">
        </div>
        <div class="form-group">
            <label for="start_postal_code">运输起点邮编</label>
            <input type="text" class="form-control" id="start_postal_code" placeholder="输入起点邮编">
        </div>
        <div class="form-group">
            <label for="end_province">运输终点省份</label>
            <input type="text" class="form-control" id="end_province" placeholder="输入终点省份">
        </div>
        <div class="form-group">
            <label for="end_city">运输终点城市</label>
            <input type="text" class="form-control" id="end_city" placeholder="输入终点城市">
        </div>
        <div class="form-group">
            <label for="end_street">运输终点街道</label>
            <input type="text" class="form-control" id="end_street" placeholder="输入终点街道">
        </div>
        <div class="form-group">
            <label for="end_postal_code">运输终点邮编</label>
            <input type="text" class="form-control" id="end_postal_code" placeholder="输入终点邮编">
        </div>
                        <div class="form-group">
                            <label for="vehicle_info">运输车辆信息</label>
                            <input type="text" class="form-control" id="vehicle_info" placeholder="输入车辆信息">
                        </div>
                        <div class="form-group">
                            <label for="distance_km">运输里程（公里）</label>
                            <input type="text" class="form-control" id="distance_km" placeholder="输入里程">
                        </div>
                        <div class="form-group">
                            <label for="start_time">运输开始时间</label>
                            <input type="datetime-local" class="form-control" id="start_time">
                        </div>
                        <div class="form-group">
                            <label for="end_time">运输结束时间</label>
                            <input type="datetime-local" class="form-control" id="end_time">
                        </div>
                        <div class="form-group">
                            <label for="temperature">温度控制信息</label>
                            <input type="text" class="form-control" id="temperature" placeholder="输入温度">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveTransportInfo">保存</button>
                </div>
            </div>
        </div>
    </div>



            <!-- Footer -->
        <footer class="bg-white iq-footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item">使用帮助</li>
                            <li class="list-inline-item">进入官网</li>
                        </ul>
                    </div>
                    <div class="col-lg-6 text-right">
                        Copyright 2024 预制菜溯源系统 版权所有
                    </div>
                </div>
            </div>
        </footer>
         </div>
      </div>

      
     <script src="../static/js/jquery.min.js"></script>
      <script src="../static/js/bootstrap.min.js"></script>
      <script src="../static/js/smooth-scrollbar.js"></script>
      <script src="../static/js/custom.js"></script>
      <script src="../static/js/laydate.js"></script>
<script>
   $(document).ready(function() {
  fetchTransportInfo();

  function fetchTransportInfo() {
    $.ajax({
      url: '/transport_info',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
        // 获取表格的 tbody 元素
        var tbody = $('#showInfo tbody');
        // 清空现有的表格内容
        {#tbody.empty();#}
        // 遍历数据并为每条数据创建一个表格行
        $.each(data, function(index, item) {
          var startCity = item.start_address.city;
    var startStreet = item.start_address.street;
    var endCity = item.end_address.city;
    var endStreet = item.end_address.street;

    var row = '<tr>' +
              '<td><input type="checkbox"></td>' +
              '<td>' + item.product_name + '</td>' +
              '<td>' + item.vehicle_info + '</td>' +
              '<td>' + item.start_address.province + ' ' + startCity + ' ' + startStreet + '</td>' +
              '<td>' + item.end_address.province + ' ' + endCity + ' ' + endStreet + '</td>' +
              '<td>' + item.start_time + '</td>' +
              '<td>' + item.end_time + '</td>' +
              '<td>' + item.temperature + '</td>' +
              '<td>' + item.transporter + '</td>' +
              '<td>' + item.distance_km + '</td>' +
              '<td>' +
                '<form action="/route" method="GET">' +
                  '<input type="hidden" name="start_city" value="' + startCity + '">' +
                  '<input type="hidden" name="start_street" value="' + startStreet + '">' +
                  '<input type="hidden" name="end_city" value="' + endCity + '">' +
                  '<input type="hidden" name="end_street" value="' + endStreet + '">' +
                  '<button type="submit" class="btn btn-primary">查看路线</button>' +
                '</form>' +
              '</td>' +
            '</tr>';
          // 将新行添加到 tbody 中
          tbody.append(row);
        });
      },
      error: function(error) {
        console.error('获取运输信息失败:', error);
      }
    });
  }
});
</script>
 <script>
        $(document).ready(function() {
            // 加载产品名称和运输负责人的选项
            loadProductOptions();
            loadTransporterOptions();

            // 显示模态框
            $('#addInfo').on('click', function() {
                $('#addTransportModal').modal('show');
            });

            // 保存新的运输信息
            $('#saveTransportInfo').on('click', function() {
                var data = {
        product_name: $('#product_name').val(),
        transporter: $('#transporter').val(),
        start_province: $('#start_province').val(),
        start_city: $('#start_city').val(),
        start_street: $('#start_street').val(),
        start_postal_code: $('#start_postal_code').val(),
        end_province: $('#end_province').val(),
        end_city: $('#end_city').val(),
        end_street: $('#end_street').val(),
        end_postal_code: $('#end_postal_code').val(),
        vehicle_info: $('#vehicle_info').val(),
        distance_km: $('#distance_km').val(),
        start_time: $('#start_time').val(),
        end_time: $('#end_time').val(),
        temperature: $('#temperature').val()
    };
                $.ajax({
                    url: '/add_transport_info', // 你的 Flask 路由
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function(response) {
                        console.log('运输信息添加成功');
                        $('#addTransportModal').modal('hide');
                        // 刷新页面或重新加载运输信息
                    },
                    error: function(error) {
                        console.error('添加运输信息失败:', error);
                    }
                });
            });
        });

        // 加载产品名称选项
        function loadProductOptions() {
            $.ajax({
                url: '/products', // 你的 Flask 路由
                type: 'GET',
                success: function(data) {
                    var select = $('#product_name');
                    data.forEach(function(item) {
                        select.append(new Option(item.name, item.id));
                    });
                }
            });
        }

        // 加载运输负责人选项
        function loadTransporterOptions() {
            $.ajax({
                url: '/users', // 你的 Flask 路由
                type: 'GET',
                success: function(data) {
                    var select = $('#transporter');
                    data.forEach(function(item) {
                        select.append(new Option(item.username, item.id));
                    });
                }
            });
        }
    </script>



   </body>
</html>
